iT邦幫忙

2023 iThome 鐵人賽

DAY 17
0
自我挑戰組

網頁學習30天系列 第 17

網頁學習30天 day17

  • 分享至 

  • xImage
  •  

上次我們使用了各種判斷來透過get請求切換不同頁面,但那只能控制單一要素,也就是thing,只能夠切換首頁、肉類、蔬菜、以及錯誤時出現的提示,現在我們讓它再加上可以切換中英文頁面的功能,我們將在上次的程式碼增加些東西,我們一樣使用thing來控制物品,然後加上lang來控制語言。
在第一段程式碼中,請求的URL可以包含名為"thing"的參數。根據這個參數,伺服器會回傳不同的HTML檔案。如果"thing"是"meat",則回傳meat.html;如果"thing"是"vegetable",則回傳vegetable.html;否則,回傳homepage.html:

url = reqUrl.pathname;
    const thing = reqUrl.searchParams.get("thing");

    if (url === '/') {
      if (thing === 'meat') {
        sendRes('meat.html', 200, res);
      } else if (thing === 'vegetable') {
        sendRes('vegetable.html', 200, res);
      } else {
        sendRes('homepage.html', 200, res);
      }
    } else {
      sendRes('error.html', 404, res);
    }
  }
});

我們設定中文為zh英文為en,接著加入lang:

const thing = reqUrl.searchParams.get("thing");
    const lang = reqUrl.searchParams.get("lang");

    if (url === '/') {
      let filename = 'homepage.html';
      if(lang === 'en'){
        filename = 'homepage-en.html';
      }

      if (thing === 'meat') {
        filename = `meat${lang === 'en' ? '-en' : ''}.html`;
      } else if (thing === 'vegetable') {
        filename = `vegetable${lang === 'en' ? '-en' : ''}.html`;
      }

      sendRes(filename, 200, res);
    } else {
      sendRes('error.html', 404, res);
    }
  }
});

這樣如果請求的URL中的lang參數的值為en(代表英文語言),則將檔案名稱後面加上-en,以指示使用英文版的檔案。例如,如果語言是英文,homepage.html會被變更為homepage-en.html,這樣就達到了我們的目的。


上一篇
網頁學習30天 day16
下一篇
網頁學習30天 day18
系列文
網頁學習30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言